﻿/**
 *
 * 自定义Jquery分页插件
 *
 * @author Zee
 * @version v1.0
 * @date 2017年9月13日
 * 如何使用：
 * $("div").easyPage(url,param,function(data){
 *     $.each(data,function(obj,i){
 *       //TODO遍历数据表格
 *     });
 * });
 */
(function ($) {
    function EasyPagination(dom, url, param, fn) {
        var self = this;
        self.pageBtn = 1;
        self.totalPage = 1;
        self.nextPage = 1;
        self.prePage = 1;
        self.pageSize = 10;
        self.totalRows = 1;
        self.dom = $(dom);
        self.url = url;
        self.fn = fn;
        self._init(param)._ajax();
    }

    EasyPagination.prototype = {
        _init: function (param) {
            var self = this;
            var defaultParam = {
                pageBtn: self.pageBtn,
                pageSize: self.pageSize,
            }
            $.extend(defaultParam, param);
            self.param = defaultParam;
            return self;
        },
        _ajax: function () {
            var self = this;
            $.ajax({
                url: self.url,
                type: 'post',
                data: self.param,
                timeout: 100000,
                dataType: 'json',
                success: function (result) {
                    // 这里可根据自己返回的JSON数据自行更改
                    self.totalRows = result.data.totalRow;
                    self.totalPage = result.data.totalPage;
                    self.pageBtn = result.data.pageBtn;
                    self.param.pageBtn = result.data.pageBtn;
                    self.nextPage = result.data.nextPage;
                    self.prePage = result.data.prePage;
                    // 处理页码HTML
                    self._renderPageHtml();
                    // 绑定分页事件
                    self._bindEvents();
                    // 执行回调
                    if (typeof self.fn === "function") {
                        // 这里的数据为List数据，后面自行完成数据表格的遍历。
                        // 其实这里数据遍历可以作进一步封装，可以免去遍历数据表格的操作
                        // 自行完成修改。。
                        self.fn(result.data.data);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    if (textStatus === "error") {
                        alert("请求失败！！");
                    } else if (textStatus === "timeout") {
                        alert("请求超时！！");
                    }
                }
            });
        },
        _bindEvents: function () {
            var self = this;
            // 先解除事件绑定防止重复执行
            self.dom.off("click", ".page_prev");
            self.dom.off("click", ".page_next");
            self.dom.off("click", ".page_first");
            self.dom.off("click", ".page_end");
            self.dom.off("click", ".jsGoPage");
            self.dom.off("click", ".page_refresh");
            self.dom.off("change", "#jsChangePageSize");
            // 上一页
            self.dom.on("click", ".page_prev", function () {
                if (self.prePage >= 1) {
                    self.param.pageBtn = self.prePage;
                    self._ajax();
                }
            });
            // 下一页
            self.dom.on("click", ".page_next", function () {
                if (self.nextPage <= self.totalPage) {
                    self.param.pageBtn = self.nextPage;
                    self._ajax();
                }
            });
            // 首页
            self.dom.on("click", ".page_first", function () {
                self.param.pageBtn = 1;
                self._ajax();
            });
            // 尾页
            self.dom.on("click", ".page_last", function () {
                self.param.pageBtn = self.totalPage;
                self._ajax();
            });
            // 页码
            self.dom.on("click", ".jsGoPage", function () {
                self.param.pageBtn = $(this).text();
                self._ajax();
            });
            // 刷新
            self.dom.on("click", ".page_refresh", function () {
                self._ajax();
            });
            // 每页显示条数
            self.dom.on("change", "#jsChangePageSize", function () {
                self.param.pageBtn = 1;
                self.param.pageSize = $(this).val();
                self._ajax();
            });
        },
        _renderPageHtml: function () {
            var self = this;
            var pageBox = "<div class='esay_pagination'>";
            pageBox += "<select clsss='page_size ' id='jsChangePageSize'>";
            if (self.param.pageSize == 10) {
                pageBox += "<option value='10' selected>10</option>";
            } else {
                pageBox += "<option value='10'>10</option>";
            }
            if (self.param.pageSize == 20) {
                pageBox += "<option value='20' selected>20</option>";
            } else {
                pageBox += "<option value='20'>20</option>";
            }

            if (self.param.pageSize == 50) {
                pageBox += "<option value='50' selected>50</option>";
            } else {
                pageBox += "<option value='50'>50</option>";
            }
            if (self.param.pageSize == 100) {
                pageBox += "<option value='100' selected>100</option>";
            } else {
                pageBox += "<option value='100'>100</option>";
            }
            pageBox += "</select>";
            pageBox += '<a href="javascript:;" title="首页" class="pageBtn page_first"><span class="first_icon"></span></a>';
            pageBox += '<a href="javascript:;" title="上一页 "class="pageBtn page_prev"><span class="prev_icon"></span></a>';
            pageBox += self._getPageBtnList();
            pageBox += '<a href="javascript:;" title="下一页" class="pageBtn page_next"><span class="next_icon"></span> </a>';
            pageBox += '<a href="javascript:;" title="尾页" class="pageBtn page_last"><span class="last_icon"></span> </a>';
            pageBox += '<a href="javascript:;" title="刷新" class="pageBtn page_refresh"><span class="refresh_icon"></span> </a>';
            pageBox += '</div>';
            self.dom.empty().html(pageBox);
        },
        _getPageBtnList: function () {
            var self = this;
            var result = "";
            for (var i = 1; i <= self.totalPage; i++) {
                // 如果这里需要显示首页的页码将:f=2
                var f = 1;
                if (i == f && self.param.pageBtn - 6 > 1) {
                    i = self.param.pageBtn - 6;
                } else if (i == self.param.pageBtn + 6
                    && self.param.pageBtn + 6 < self.totalPage) {
                    // 这里如果需要显示最后一页的页码 将下面代码换为 :i = self.totalPage-1;
                    i = self.totalPage;
                } else {
                    if (i == self.param.pageBtn) {
                        result += "<a class='pageBtn jsGoPage current'>" + i
                            + "</a>";
                    } else {
                        result += "<a class='pageBtn jsGoPage '>" + i + "</a>";
                    }

                }
            }
            return result;
        }
    }
    // 扩展至jquery方法
    $.fn.easyPage = function (url, param, fn) {
        return new EasyPagination(this, url, param, fn);
    }
})(jQuery);
